const imgBox = this.getContainer().find('.imgBox');
/**
 * 转轮轮播图
 * @param elem
 * @param options
 * @param carouselBox
 * @param cal_options
 * @constructor
 */

function Wheel(elem, options, carouselBox, cal_options) {
    this.defaults = {
        curDisplay: 0,
        autoPlay: true,
        interval: 10,  // 秒单位
        data: [],
    }; // 默认配置
    this.opts = $.extend({}, this.defaults, options); // 在jQuery命名空间上增加两个函数
    this.$wheelBox = elem;                              // 轮盘实例
    this.curWheel = this.opts.curDisplay;
    this.iWheel = this.opts.curDisplay;          // 轮盘当前播放第几个
    this.wheelTimer = null;                     // 计时器
    this.curDisplay = this.opts.curDisplay;
    this.autoPlay = this.opts.autoPlay;
    this.interval = 60 / this.opts.interval;         // 间隔角度
    // 轮盘转动速度
    this.$wheelBox.css({ transition: 'transform 1s 0s linear' });
    // 生成元素
    let html = '';
    this.opts.data.nameList.forEach(item => {
        html += `<div class="item">
                    <div>${item}</div>
                </div>`;
    });
    this.$wheelBox.append(html);
    this.inital();
    // 实例化轮播
    this.carouselBox = carouselBox;
    this.cal_options = cal_options;
    this.Carousel = new Carousel(carouselBox, cal_options, this.opts.data.listData[0].data);
    imgBox.html('').append('<img src="' + this.opts.data.listData[0].imgUrl + '" alt=""/>');
}

Wheel.prototype = {
    turn: function () {
        if (this.autoPlay) {
            this.iWheel++;
            this.movingWheel(this.iWheel);
        }
    },
    // 转动轮盘
    movingWheel: function (index) {
        // 当前在哪个角度范围
        this.initalWheel();
    },

    initalWheel: function () {
        let self = this;

        let i = 0;
        let grid = this.opts.interval / 10;
        if (this.iWheel < this.opts.interval / 2) {
            i = 0;
        } else {
            i = (parseInt((this.iWheel - this.opts.interval / 2 - grid) / this.opts.interval) + 1) % 6;
        }
        if (i !== this.curWheel) {
            // 实例化轮播
            this.Carousel = new Carousel(this.carouselBox, this.cal_options, this.opts.data.listData[i].data);
            // 切换图片

        }
        this.curWheel = i;
        this.$wheelBox.find('.item').eq(this.curWheel).addClass('active').siblings().removeClass('active')
        this.$wheelBox.stop(true).css({
            transform: 'rotate(' + this.interval * this.iWheel + 'deg)'
        });
    },

    inital: function () {
        let self = this;

        this.$wheelBox.hover(function () {
            self.$wheelBox.stop(true);
            clearInterval(self.wheelTimer);
        }, function () {
            self.wheelTimer = setInterval(function () {
                self.turn();
            }, 1000);
        });
        this.initalWheel();
        // 定时器需要清除
        this.$wheelBox.stop(true);
        clearInterval(this.wheelTimer);
        this.wheelTimer = setInterval(function () {
            self.turn();
        }, 1000);
    },

    constructor: Wheel
};


/**
 * 转轮轮播图
 * @param elem
 * @param options
 * @param data
 * @constructor
 */
function Carousel(elem, options, data) {
    // curDisplay 当前播放第几个（0为第一个）
    // autoPlay 是否开启自动轮播
    // interval 自动轮播间隔时间
    // transition 动画过渡间隔时间
    // pageSize  每页展示数量
    // boxName  轮播图盒子class
    // itemName  轮播图盒子节点class
    this.defaults = {
        curDisplay: 0,
        autoPlay: false,
        interval: 3000,
        transition: 300,
        pageSize: 5,
        data: [],
        boxName: 'listInner',
        itemName: 'item',
        itemWidth: 400
    }; // 默认配置
    this.opts = $.extend({}, this.defaults, options); // 在jQuery命名空间上增加两个函数

    let self = this;
    // 清除html
    elem.html('');
    elem.append('<div class="listInner"></div>');
    this.$carousel = elem.find('.' + this.opts.boxName);    // 轮播实例
    this.curDisplay = this.opts.curDisplay;
    this.autoPlay = this.opts.autoPlay;
    this.b_switch = true;                       // 切换
    this.iNow = this.opts.curDisplay;           // 当前播放第几个
    this.timer = null;                          // 计时器
    this.interval = this.opts.interval;         // 间隔时间
    this.data = data;         // 数据
    // 处理数据-分组
    this.itemLen = Math.ceil(this.data.length / this.opts.pageSize);   // 轮播图节点数量
    // 添加节点
    let groupData = _.chunk(this.data, this.opts.pageSize);
    // 无缝轮播处理
    groupData = groupData.concat(_.takeRight(groupData, 1));
    groupData.forEach(function (item) {
        let htmlItem = '';
        item.forEach(function (i) {
            htmlItem += `<li> <i></i> <span>${i}</span></li>`;
        });
        // 放入轮播节点
        self.$carousel.append(`<ul class="${self.opts.itemName}">${htmlItem}</ul>`);
    });
    this.$aItem = this.$carousel.find('.' + this.opts.itemName);    // 需要轮播的元素-节点
    this.boxMaxWidth = this.opts.itemWidth * (this.itemLen + 1);     // 盒子所需最大宽度
    // 赋予最大宽度
    this.$carousel.width(this.boxMaxWidth);
    // 生成轮播进步点
    let htmlNav = '';
    if (this.itemLen > 1) {
        for (let i = 0; i < this.itemLen; i++) {
            if (this.curDisplay === i) {
                htmlNav += '<li class="active"></li>';
            } else {
                htmlNav += '<li></li>';
            }
        }
    }
    // 放入轮播进步点
    elem.append('<ul class="bannerNav">' + htmlNav + '</ul>');
    this.$aNav = this.$carousel.siblings('.bannerNav').find('li');
    this.inital();
}

Carousel.prototype = {
    play: function () {
        if (this.autoPlay && this.itemLen > 1) {
            if (this.iNow >= this.itemLen) {
                this.iNow = 1;
                this.$carousel.css({
                    marginLeft: 0
                });
            } else {
                this.iNow++;
            }
            this.moving(this.iNow);
        }
    },

    moving: function (index) {
        this.curDisplay = index;
        this.initalCarousel();
    },

    // 执行渲染
    initalCarousel: function () {
        this.$carousel.animate({
            marginLeft: -this.opts.itemWidth * this.curDisplay + 'px'
        }, this.opts.transaction);
        if(this.curDisplay >= this.itemLen){
            this.$aNav.eq(0).addClass('active').siblings().removeClass('active');
        }else{
            this.$aNav.eq(this.curDisplay).addClass('active').siblings().removeClass('active');
        }

    },

    inital: function () {
        let self = this;

        this.initalCarousel();
        this.$aItem.hover(function () {
            clearInterval(self.timer);
        }, function () {
            self.timer = setInterval(function () {
                self.play();
            }, self.interval);
        });
        this.$aNav.on('click', function (ev) {
            if (self.b_switch && !$(this).hasClass('active')) {
                self.iNow = $(this).index();
                // self.b_switch = false;
                let index = $(this).index();
                self.moving(index);
            }
        }).hover(function () {
            clearInterval(self.timer);
        }, function () {
            self.timer = setInterval(function () {
                self.play();
            }, self.interval);
        });
        // 定时器需要清除
        clearInterval(this.timer);
        this.timer = setInterval(function () {
            self.play();
        }, this.interval);
        this.$carousel.on('selectstart', function () {
            return false;
        });
    },

    constructor: Carousel
};

const listOuter = this.getContainer().find('.listOuter');
const wheelBox = this.getContainer().find('.wheel');
this.Wheel = new Wheel($(wheelBox), {
    curDisplay: 0,
    autoPlay: true,
    interval: 20,  // 秒单位
    data: formateData(data),
}, $(listOuter), {
    curDisplay: 0,
    autoPlay: true,
    interval: 3000, // 毫秒单位
    boxName: 'listInner',
    itemName: 'item',
});

function formateData(data) {
    let nameList = [];
    let newData = [];
    data.forEach(item => {
        let index = nameList.indexOf(item['所属行业']);
        if (index !== -1) {
            newData[index].data = _.uniq(newData[index].data.concat(item['服务用户'].split('、')));
        } else {
            nameList.push(item['所属行业']);
            newData.push({
                name: item['所属行业'],
                imgUrl: item.url,
                data: item['服务用户'].split('、')
            });
        }
    });
    return {
        nameList,
        listData: newData
    };
};
